<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
    <link href="/static/css/common.css" rel="stylesheet">
    <script src="/static/js/Plugin/jquery-3.3.1.min.js"></script>
    <script src="/static/js/Plugin/echarts.min.js"></script>
    <script src="/static/js/Plugin/bmap.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=LelFSt6BfykGf8m3PB5zr8LaXAG2cMg6"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/index.js"></script>
    <script src="/static/js/Plugin/laydate/laydate.js"></script>
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li class="nav_active"><i class="nav_1"></i><a href="/">数据概况</a> </li>
            <li><i class="nav_2"></i><a href="/quota">订单分析</a> </li>
            <li><i class="nav_3"></i><a href="/trend">趋势分析</a> </li>
            <li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
            </ul>
    </div>
    <div class="header_center left" style="position:relative">
        
        <h2><strong>大数据展示</strong></h2>

    </div>
    <div class="right nav text_right">
        <ul>

        </ul>
    </div>

</header>
<!--内容部分-->
<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="static/img/user.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>用户总数(人)</p>
                    <p>{{.userCount}}</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="static/img/hot.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>今日注册(人)</p>
                    <p>{{.todayCount}}</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="static/img/pay.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>油卡充值订单(笔)</p>
                    <p class="sky">{{.oilNum}}</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="static/img/local.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>今日充值(笔)</p>
                    <p class="sky">{{.todayOilOrderNum}}</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="static/img/order.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>话费充值订单(笔)</p>
                    <p class="org">{{.mobileNum}}</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="static/img/today.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>今日充值(笔)</p>
                    <p class="org">{{.dayMobileOrderSum}}</p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="static/img/tingji.png">各机型注册用户比例</div>
                <p id="pieChart1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="static/images/title_2.png">各套餐充值比例</div>
                <p id="histogramChart" class="p_chart"></p>
            </div>
        </div>
        <div class="div_any02 left ">
            <div class="div_any_child div_height">
                <div class="div_any_title any_title_width"><img src="static/images/title_0.png">杭州市地图 </div>
                <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
            </div>
        </div>
        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="static/images/title_3.png">数据汇总(7天)</div>
                <p id="lineChart" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="static/images/title_4.png">就诊人数(当日)</div>
                <p id="lineChart2" class="p_chart"></p>
            </div>
        </div>
    </div>

    <div id="el-dialog" class="">
        <div class="xc_layer"></div>
        <div class="popBox" id="printView">
            <div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img src="static/images/close.png" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div>
            <div class="txtBox" id="el-dialog_body">
             <div style="height:100%;width: 98%;margin-left: 1%;">
               <div class="left div_any01" style="width: 64%;">
                   <div class="div_any_child">
                       <div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="static/images/title_4.png">门诊住院人次</div>
                       <p id="lineChart3" class="p_chart"></p>
                   </div>
                   <div class="div_any_child">
                       <div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="static/images/title_7.png">医疗费用</div>
                       <p id="lineChart4" class="p_chart"></p>
                   </div>
               </div>
               <div class="left div_any01"  style="width: 32%;">
                   <div class="div_any_child">
                       <div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="static/images/title_18.png">病人年龄段分布</div>
                       <p id="pieChart2" class="p_chart"></p>
                   </div>
                   <div class="div_any_child">
                       <div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="static/images/title_20.png">医疗费用组成</div>
                       <p id="pieChart3" class="p_chart"></p>
                   </div>
               </div>

             </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    var android = "{{.androidSum}}";
    var ios = "{{.iosSum}}";
    var other = "{{.otherSum}}";
    var dayArray = [];
    var sumArray = [];
    $.each({{.weekUser}},function (i,v) {
        dayArray[i] = v.Days
        sumArray[i] = v.Sum
    });
    var oilOrderArray = [];
    $.each({{.weekOilOrder}},function (i,v) {
       oilOrderArray[i] = v.Sum
    });
    var mobileOrderArray = [];
    $.each({{.weekmobileOrder}},function (i,v) {
        mobileOrderArray[i] = v.Sum
    });


    var pieChart1 = echarts.init(document.getElementById('pieChart1'));
    pieChart1.setOption({

        color:["#87cefa","#ff7f50","#32cd32","#da70d6",],

        legend: {
            y : '260',
            x : 'center',
            textStyle : {
                color : '#ffffff',

            },
            data : ['安卓','苹果','其他'],
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a}<br/>{b}<br/>{c}人 ({d}%)"
        },
        calculable : false,
        series : [
            {
                name:'注册比例',
                type:'pie',
                radius : ['40%', '70%'],
                center : ['50%', '45%'],
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '20',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:android, name:'安卓'},
                    {value:ios, name:'苹果'},
                    {value:other, name:'其他'},
                ]
            }
        ]
    });

    var lineChart = echarts.init(document.getElementById('lineChart'));
    lineChart.setOption({

        color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
        legend: {
            y : '260',
            x : 'center',
            textStyle : {
                color : '#ffffff',

            },
            data : ['用户注册数','油卡订单数','话费订单数'],
        },
        calculable : false,
        tooltip : {
            trigger: 'item',
            formatter: "{a}<br/>{b}<br/>{c}"
        },
        yAxis: [
            {
                type: 'value',
                axisLine : {onZero: false},
                axisLine:{
                    lineStyle:{
                        color: '#034c6a'
                    },
                },

                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (value) {
                        return value
                    },
                },
                splitLine:{
                    lineStyle:{
                        width:0,
                        type:'solid'
                    }
                }
            }
        ],
        xAxis: [
            {
                type: 'category',
                data : dayArray,
                axisLine:{
                    lineStyle:{
                        color: '#034c6a'
                    },
                },
                splitLine: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (value) {
                        return value
                    },
                },
                splitLine:{
                    lineStyle:{
                        width:0,
                        type:'solid'
                    }
                },
            }
        ],
        grid:{
            left: '5%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        series : [
            {
                name:'用户注册数',
                type:'line',
                smooth:true,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                data:sumArray
            },
            {
                name:'油卡订单数',
                type:'line',
                smooth:true,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                data:oilOrderArray
            },
            {
                name:'话费订单数',
                type:'line',
                smooth:true,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                data:mobileOrderArray
            },

        ]
    });



    //药占比
    var histogramChart = echarts.init(document.getElementById('histogramChart'));
    histogramChart.setOption( {

        color:['#87cefa'],
        grid:{
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a}<br/>{b}<br/>{c}"
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['一个月套餐','三个月套餐','六个月套餐','十二个月套餐','十八个月套餐','二十四个月套餐'],
                axisLine:{
                    lineStyle:{
                        color: '#87cefa'
                    },
                },
                axisLabel : {
                    interval:0,
                    rotate:40,

                    textStyle: {
                        color: '#fff',
                        fontSize:13
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine:{
                    lineStyle:{
                        color: '#87cefa'
                    },
                },
                splitLine: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (value) {
                        return value
                    },
                },
            }
        ],
        series : [
            {
                name:'',
                type:'bar',
                barWidth:30,
                data:[60,80,70,50,100,500],
            },
        ]
    });
</script>
</html>
